<template>
  <div class="pickUpTime">
    <van-popup v-model="show" position="bottom" @close="closePopup" :close-on-click-overlay="false" closeable round :style="{ height: '60vh' }">
      <div class="txt">提货时间</div>
      <div class="timeBox" v-if="list">
        <div class="timeBox_l">
          <div class="timeBox_l_item" :class="{ isSelect: index == selectKey }" v-for="(item, index) in list" :key="index" @click="seleTap(index)">{{ index }}</div>
        </div>
        <div class="timeBox_r">
          <div class="timeBox_r_item" :class="{ timeKeySelect: timeKey == item }" @click="timeKeySelect(item, index)" v-for="(item, index) in list[selectKey]" :key="index">
            {{ item }}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    storeId: {
      type: null
    }
  },
  watch: {
    show(newVal, oldVal) {
      if (newVal) {
        this.lsit = [];
        this.selectKey = null;
        this.timeKey = null;
        this.getData();
      }
    }
  },
  data() {
    return {
      list: null,
      selectKey: null,
      timeKey: null
    };
  },
  methods: {
    timeKeySelect(item, ind) {
      this.timeKey = item;
      this.$emit("closePopup", { key: this.selectKey, timeKey: this.timeKey, getTime: new Date(`${this.selectKey} ${this.timeKey}`).getTime() / 1000 });
    },
    seleTap(e) {
      this.selectKey = e;
      this.timeKey = null;
    },
    closePopup() {
      this.$emit("closePopup");
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.goods-buy.get-deliver-time", { store_id: this.storeId }, ".");
      if (result) {
        this.list = data;
        for (const key in data) {
          if (!this.selectKey) {
            this.selectKey = key;
          } else {
            return;
          }
        }

        this.selectKey = data[0];
      } else {
        this.$toast(msg);
      }
      console.log("openEcpTime");
    }
  }
};
</script>
<style lang="scss" scoped>
.txt {
  font-weight: 600;
  font-size: 0.94rem;
  text-align: center;
  line-height: 2.7rem;
}
.timeBox {
  display: flex;
  justify-content: space-between;
  .timeBox_l {
    flex-shrink: 0;
    width: 6.88rem;
    background: #f5f5f5;
    .timeBox_l_item {
      width: 6.88rem;
      height: 2.7rem;
      text-align: center;
      line-height: 2.7rem;
      font-weight: 500;
      font-size: 0.81rem;
    }
    .isSelect {
      background: #fff;
      color: #f15353;
      position: relative;
    }
    .isSelect::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.19rem;
      height: 0.94rem;
      background: #f15353;
      border-radius: 0.94rem;
    }
  }
  .timeBox_r {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50vh;
    overflow-y: scroll;
    .timeBox_r_item {
      width: 14.69rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      border-radius: 0.5rem;
      border: 0.03rem solid #aaaab3;
      margin-bottom: 0.63rem;
    }
    .timeBox_r_item:last-child {
      margin-bottom: 0;
    }
    .timeKeySelect {
      background: #feeded;
      border: 0.03rem solid #f15353;
      font-weight: 500;
      font-size: 0.81rem;
      color: #f15353;
    }
  }
}
</style>
